<template>
    <div class="wrop-right flex fdc">
        <div class="wrop-right-top fg1 flex">
            <h1 class="mr-20 ">Themes</h1>
            <div class="flex aic">
                <el-input v-model="input" placeholder="" />
                <a-button class="ml-5" type="primary" ghost>Search</a-button>
            </div>
        </div>
        <div class="wrop-right-bottom  flex jc-sa fg1 fww">
            <!-- 模板展示 -->
            <div 
                v-for="({name,path,img},index) in ThemesList" 
                :key="index"
                class="box flex bs fdc">
                <div class="box-top flex">
                    <!-- <img :src= "path"  alt=""> -->
                    <img :src="state.imgs()[index]" alt="">
                    <div class="box-content">
                        <el-button  type="info">Themes Details</el-button>
                    </div>
                </div>
                <div class="box-bottom flex jc-sa">
                    <p>{{name}}</p>
                    <div>
                        <el-button>Activate</el-button>
                    <el-button @click="ThemesDetails()" type="primary">Live Preview</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()
const ThemesLists = []
for (let i=0; i<1;i++) {
    ThemesLists.push(
        {
            name:`Themes one`,
            path:'../img/ThemesImg/1.png',
        }
    )
}
const ThemesList = ref([
    {
        name:'Themes one',
        path:'../img/ThemesImg/1.png',
    },{
        name:'Themes two',
        path:'../img/ThemesImg/2.png'
    },{
        name:'Themes three',
        path:'../img/ThemesImg/3.png'
    },{
        name:'Themes four',
        path:'../img/ThemesImg/4.png'
    },{
        name:'Themes five',
        path:'../img/ThemesImg/5.png'
    },{
        name:'Themes six',
        path:'../img/ThemesImg/6.png'
    },{
        name:'Themes seven',
        path:'../img/ThemesImg/7.png'
    },{
        name:'Themes eight',
        path:'../img/ThemesImg/8.png'
    },{
        name:'Themes nine',
        path:'../img/ThemesImg/9.png'
    },{
        name:'Themes ten',
        path:'../img/ThemesImg/10.png'
    },
]);

const deepLoopImag = ThemesList.value
const state = reactive({
    imgs:()=>{
        const imgs = []
        for(let i=0;i<deepLoopImag.length;i++){
            imgs.push(new URL(deepLoopImag[i].path, import.meta.url).href)
        }
        return imgs
    }
})
const ThemesDetails = () => {
    // router.push({ path: `/website/dome-themes` })
}
const input = ref('')
</script>

<style lang="less" scoped>
// 右侧内容
.wrop-right {
    background: #f1f1f1;
    &-top {
    padding: 20px;
    border-bottom: 1px solid #d3d1d1;
        & > p{
            font-weight:bold;
        }
        & > div{
            width: 200px;
        }
    }

    &-bottom {
    padding: 30px 10px 10px 10px;
    overflow: auto;

    &>div {
        margin-bottom: 30px;
    }
    .box {
        
        &-top {
        width: 450px;
        height: 300px;
        border-bottom: 1px solid #d5d0d0;
            & > img {
                height: 100%;
                width: 100%;
            }
        }
        &-bottom{
            background: #fff;
            padding: 10px;
                & > p{
                    font-weight:bold;
                    line-height: 25px;
                    text-align: center;
                }
        }
    }

    }
}

// 遮罩层
.box-top {
    font-family: 'Dosis', sans-serif;
    position: relative;
    overflow: hidden;
  
}
.box-top:before,
.box-top:after {
  content: '';
  background: linear-gradient(#f9f9fc 0%, #e8e8e9 100%);
  height: 150%;
  width: 100%;
  border-radius: 0 100% 0 0;
  opacity: 0;
  position: absolute;
  left: -50%;
  top: 100%;
  z-index: 1;
  transition: border-radius .5s ease-out, top .5s ease-out, opacity .3s ease-out;
}

.box-top:after {
  border-radius: 100% 0 0 0;
  left: 50%;
}

.box-top:hover:before,
.box-top:hover:after {
  top: -50%;
  opacity: 0.9;
  border-radius: 0 35% 0 0;
}

.box-top:hover:after {
  border-radius: 35% 0 0 0;
}
.box-top .box-content {
  color: #fff;
  text-align: center;
  width: 80%;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transition: all 0.3s ease 0.2s;
}

.box-top:hover .box-content {
  opacity: 1;
}
// 遮罩层 end

/* 整个滚动条 */
.wrop-right-bottom::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 5px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

/* 滚动条上的滚动滑块 */
.wrop-right-bottom::-webkit-scrollbar-thumb {
    background-color: #cdcecf;
    border-radius: 32px;
}

</style>